<template>
	<div class="table-box">
		<ProTable
			ref="deptTable"
			title="部门列表"
			row-key="deptId"
			:columns="columns"
			:request-api="getDeptListApi"
			:pagination="false"
		>
			<!-- 表格header按钮 -->
			<template #tableHeader>
				<el-button type="primary" :icon="CirclePlus" @click="openDeptDialog('新增', {})">新增部门</el-button>
			</template>
			<!-- 表格操作 -->
			<template #operation="scope">
				<el-button type="primary" link :icon="CirclePlus" @click="openDeptDialog('新增1', scope.row)">新增</el-button>
				<el-button type="primary" link :icon="EditPen" @click="openDeptDialog('编辑', scope.row)">编辑</el-button>
				<el-button type="danger" link :icon="Delete" @click="deleteDept(scope.row)">删除</el-button>
			</template>
		</ProTable>
		<!-- 弹窗 -->
		<el-dialog v-model="deptVisible" :title="deptTitle" :destroy-on-close="true" width="30%" draggable>
			<el-form label-width="100px" ref="deptFormRef" label-suffix=" :" :model="deptFormModel">
				<el-form-item
					label="上级部门"
					prop="parentDeptId"
					:rules="[{ required: true, message: '请选择上级部门', trigger: 'blur' }]"
				>
					<el-tree-select
						v-model="deptFormModel.parentDeptId"
						check-strictly
						:data="deptTreeData"
						style="width: 100%"
						:props="defaultDeptProps"
						:render-after-expand="false"
						placeholder="请选择上级部门"
					>
					</el-tree-select>
				</el-form-item>
				<el-form-item
					label="部门名称"
					prop="deptName"
					:rules="[
						{
							required: true,
							message: '请填写部门名称',
							trigger: 'blur'
						}
					]"
				>
					<el-input v-model="deptFormModel.deptName" placeholder="请填写部门名称" clearable></el-input>
				</el-form-item>
				<el-form-item
					label="负责人"
					prop="leader"
					:rules="[
						{
							required: true,
							message: '请填写负责人',
							trigger: 'blur'
						}
					]"
				>
					<el-input v-model="deptFormModel.leader" placeholder="请填写负责人" clearable></el-input>
				</el-form-item>
				<el-form-item
					label="排序"
					prop="orderNum"
					:rules="[
						{
							required: true,
							message: '请填写排序',
							trigger: 'blur'
						}
					]"
				>
					<el-input-number
						v-model="deptFormModel.orderNum"
						:min="1"
						placeholder="请填写排序"
						clearable
						controls-position="right"
					></el-input-number>
				</el-form-item>
				<el-form-item
					label="启用状态"
					prop="status"
					:rules="[
						{
							required: true,
							message: '请选择',
							trigger: 'blur'
						}
					]"
				>
					<el-radio-group v-model="deptFormModel.status">
						<el-radio :label="'0'">是</el-radio>
						<el-radio :label="'1'">否</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="deptVisible = false">取消</el-button>
					<el-button type="primary" @click="handleSubmit">确认</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="tsx" setup name="deptManage">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh, Setting } from "@element-plus/icons-vue";
import { FormInstance, ElMessage } from "element-plus";
import { ref } from "vue";
import { getDeptListApi, addDeptApi, editDeptApi, deleteDeptApi} from "@/api/modules/test/dept";
import { useHandleData } from "@/hooks/useHandleData";

// 表单配置项
const columns: ColumnProps[] = [
	{ type: "index", label: "序号", width: 150 },
	{
		prop: "deptName",
		label: "部门名称",
		align: "center",
		search: {
			el: "input"
		}
	},
	{
		prop: "leader",
		label: "负责人"
	},
	{
		prop: "status",
		label: "状态",
		enum: [
			{
				label: "启用",
				value: '0'
			},
			{
				label: "禁用",
				value: '1'
			}
		],
		search: { el: "select" },
		render: scope => {
			// 渲染tag
			return <el-tag type={scope.row.status == '0' ? "success" : "danger"}>{scope.row.status == '0' ? "启用" : "禁用"}</el-tag>;
		}
	},
    {
        prop: "operation", label: "操作", width: 350, fixed: "right"
    }
];

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const deptTable = ref();

// 弹窗
const deptVisible = ref(false);
const deptTitle = ref("");
const deptFormRef = ref<FormInstance>();
const deptFormModel = ref({
    deptId: undefined,
    parentDeptId: undefined,
    deptName: undefined,
    leader: undefined,
    orderNum: 0, // 排序
    status: '0' // 状态
});

// 弹窗部门树
const deptTreeData = ref([] as any);

const defaultDeptProps = {
  children: 'children',
  label: 'deptName',
  value: "deptId"
}

// 新增/编辑
const openDeptDialog = async (title: string, row: any = {}) => {
	deptTitle.value = title;
	deptVisible.value = true;

    const { result } = await getDeptListApi({});
    deptTreeData.value = [
        {
            deptId: "0",
            deptName: "根目录",
            children: result
        }
    ]
	if (title == '新增1') {
		deptFormModel.value = {} as any;
		deptFormModel.value.parentDeptId = row.deptId;
	} else {
		deptFormModel.value = row;
	}
    
};

// 提交
const handleSubmit = () => {
    deptFormRef.value!.validate(async valid => {
        if (!valid) return;
        try {

			const data = await addDeptApi(deptFormModel.value);
			ElMessage.success({message: data.message});

            deptTable.value.getTableList!();
            deptVisible.value = false;
        } catch (err) {
            console.log(err)
        }
    })
}

// 删除
const deleteDept = async (val: any) => {
	await useHandleData(deleteDeptApi,  {deptId: val.deptId}, "删除部门");
	deptTable.value.getTableList();
}
</script>